<template>
  <div id="app">
    <el-container v-show="show">
      <el-header class="header">
        <h1>UNI-ADMIN</h1>
        <div class="right">
          <el-menu class="el-menu-demo" mode="horizontal" active-text-color="#F0C670" background-color="#545C65"
            text-color="#fff" router default-active="/index/back">
            <el-menu-item index="/index/back">首页</el-menu-item>
            <el-menu-item index="/shops/shoplist">商品</el-menu-item>
            <el-menu-item index="/order/ordercontrol">订单</el-menu-item>
            <el-menu-item index="/member/points">会员</el-menu-item>
            <el-menu-item index="/set/basicsset">设置</el-menu-item>
          </el-menu>
          <el-avatar icon="el-icon-user-solid" size="small">
          </el-avatar>
          <el-dropdown @command="logout">
            <span class="el-dropdown-link">
              admin<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown" split-button="true" size="mini">
              <el-dropdown-item command="a">修改</el-dropdown-item>
              <el-dropdown-item command="b">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>

      </el-header>



    </el-container>
    <router-view />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        show: true
      }
    },

    methods: {
      logout(vul) {
        if(vul == 'b'){
          localStorage.removeItem('token')
          this.$router.push({path : '/login'})
        }
      }
    },

    watch: {
      $route: {
        handler(newval, oldval) {
          if (newval.path == '/login') {
            this.show = false
          } else {
            this.show = true
          }
        }
      }
    },
  }
</script>

<style lang="scss">
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }

  #nav {
    padding: 30px;

    a {
      font-weight: bold;
      color: #2c3e50;

      &.router-link-exact-active {
        color: #42b983;
      }
    }
  }

  .header {
    h1 {
      float: left;
    }

    color: #fff;
    width: 100%;
    align-items: center;
    background-color: #545C65;

    .right {
      float: right;
      display: flex;
      align-items: center;
    }

    .el-dropdown {
      margin-left: 5px;
      color: #fff;
    }

  }
</style>